<template>
  <ImageUpload v-if="pictureCard" v-bind="props" @change="handleChange" />
  <BasicUpload v-else v-bind="props" @change="handleChange" />
</template>
<script setup lang="ts">
  import ImageUpload from './components/ImageUpload.vue';
  import BasicUpload from './BasicUpload.vue';
  import { uploadContainerProps } from './props';
  import { watch } from 'vue';
  import { isArray } from '@/utils/is';

  const emits = defineEmits(['update:value', 'change']);
  const props = defineProps({
    ...uploadContainerProps,
    pictureCard: {
      type: Boolean,
      default: false,
    },
    isNeedConvert: {
      // 是否需要转换
      type: Boolean,
      default: false,
    },
  });
  /**
   * 将数组转换为字符串
   * @param arr
   */
  const arrToStr = (arr: any) => {
    if (isArray(arr)) {
      return arr.join(',');
    }
    return arr;
  };
  const handleChange = (val) => {
    const v = props.isNeedConvert ? arrToStr(val) : val;
    emits('update:value', v);
    emits('change', v);
  };
  watch(
    () => props.value,
    (val) => {
      handleChange(val);
    },
  );
</script>
<style lang="less" scoped></style>
